<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>用户留言显示</legend>
</fieldset>

<table  id="tab" class="layui-table" lay-filter="demo" lay-data="{width:1088, height:480, url:'/message/selectAll.action', page:true, id:'idTest'}">
    <thead>
    <tr>
        <th lay-data="{field:'mid', width:80, fixed: true}">留言ID</th>
        <th lay-data="{field:'uid', width:80, fixed: true}">用户ID</th>
        <th lay-data="{field:'uname', width:100,}">用户名</th>
        <th lay-data="{field:'word', width:280}">留言内容</th>
        <th lay-data="{field:'messagedate', width:220}">留言时间</th>
        <th lay-data="{field:'tag', width:100}">是否标记</th>
        <th lay-data="{fixed: 'right', width:220, align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>

<script id="barDemo" type="text/html">
    <a id="biaoji" class="layui-btn layui-btn-xs" lay-event="edit">标记</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    
                    var str=JSON.parse(JSON.stringify(data));
                    var  mid=str["mid"];
                    console.log(str["mid"]);
                    $.ajax({
                        "url":"/delController.do?mid="+mid,
                        "Type":"GET",
                    }).done(function () {
                    }).fail()
                });
            } else if(obj.event === 'edit'){      //标记
                var str=JSON.parse(JSON.stringify(data));
                var  mid=str["mid"];//获得标记行的留言id
                var  tag=str["tag"];//获得标记行的留言标记tag
                console.log(tag);
                if(tag=="F"){
                    obj.update({
                        tag: "T"
                    });
//                    layer.alert('标记行：<br>'+"以标记");
                    $("#biaoji").html("以标记");
                   console.log($("#biaoji"));
                }else{
                    obj.update({
                        tag:"F"
                    });
//                    layer.alert('标记行：<br>'+"取消标记");
                    $("#biaoji").html("取消标记");
                }
                 $.ajax({
                     "url":"/tagController.do?mid="+mid+"&tag="+tag,
                     "Type":"GET",
                     }).done(function () {
                 }).fail()
            }
        });
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>